 
 
<!DOCTYPE html>
 
<html>
 
 
 
<head>
 
<meta http- equiv="Content-Type" content= "text/html; charset=utf-8" />
 
<meta http- equiv="X-UA-Compatible" content= "IE=edge" >
 
<meta name="viewport" content= "width=device-width, initial-scale=1" >
 
<meta name="keywords" content= "jQuery" />
 
<meta name="description" content= "" />
 
<title>选择品牌 < /title>
 
< link rel= "stylesheet" href= "css/reset.css" />
 
<link rel="stylesheet" href= "css/car_type.css" />
 
<link rel="stylesheet" href= "css/mui.css" />
 
<link rel="stylesheet" href= "css/mui.min.css" />
 
<meta http- equiv="Content-Type" content= "text/html; charset=utf-8" />
 
 
 
</head>
 
 
 
< body >
 
<!--引入js脚本文件-->
 
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" > </script>
 
< script src= "js/jquery.min.js" > </script>
 
 
 
< script type= "text/javascript" src= "js/bscroll.min.js" > </script>
 
 
 
< !--<header class="mui-bar mui-bar-nav" > -->
 
<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" > </a>-->
 
< !--<h1 class="mui-title" > 选择车型品牌 < /h1>-->
 
< !--</header>-->
 
 
 
< div class="mui-content" >
 
<!--一级列表-->
 
<div id="showLetter" class="showLetter" > <span></span></div>
 
<div class="city" >
 
<div class="city-wrapper city-wrapper-hook" >
 
<div class="scroller-hook" >
 
<!--id="car_ty"-- >
<div class="cities cities-hook" > </div>
< /div>
< div class="shortcut shortcut-hook" > </div>
< /div>
< /div>
< !--二级列表-->
 
<div class="conts" >
 
<ul class="cont_ser" >
 
 
 
</ul>
 
< /div>
 
 
 
< !--三级列表-->
 
<div class="car_bse" >
 
<ul class="CAR_BSE_COT" >
 
 
 
</ul>
 
 
 
< /div>
 
< /div>
 
 
 
<script type= "application/javascript" >
 
      var cityWrapper = document.querySelector('.city-wrapper-hook');
 
var cityScroller = document.querySelector('.scroller-hook');
 
//获取到品牌
 
var cities = document.querySelector('.cities-hook');
 
var shortcut = document.querySelector('.shortcut-hook');
 
//获取到车系
 
var cont_ser = document.querySelector('.cont_ser');
 
 
 
//获取到三级
 
var car_bse_cot = document.querySelector('.car_bse_cot');
 
 
 
var scroll;
 
 
 
var shortcutList = [];
 
var anchorMap = {};
 
$(function () {
 
getareainfo();
 
});
 
 
 
function getareainfo() {
 
var y = 0;
 
var titleHeight = 28;
 
var itemHeight = 44;
 
var lists = '';
 
var en = '<ul>';
 
//声明变量品牌
 
var brand;
 
//声明车系变量
 
var car_service;
 
//三级列表选中名称
 
var carbse_ser;
 
//请求数据 品牌字母
 
$.ajax({
 
//获取地址
 
url: "",
 
//提交方式
 
type: "GET",
 
async: true,
 
//绑定数据
 
 
 
success: function (data) {
 
var data = data.data;
 
if (data != null && data.length > 0) {
 
for (var i = 0; i < data.length; i++) {
 
lists += '<div class="title" >' + data[i].shou_zm + '</div>';
 
lists += '<ul>';
 
for (var j = 0; j < data[i].brand.length; j++) {
lists += '<li class="item bg-white" data-name="'
+ data[i].brand[j].brand +
'" data-id="' + data[i].brand[j].brand + '">
 
< span class="border-1px name"
 
data - id="' + data[i].brand[j].brand +
'" data-name="' + data[i].brand[j].brand + '">'
 
+ data[i].brand[j].brand + '</span></li>';
 
 
 
}
 
lists += '</ul>';
 
 
 
var name = data[i].shou_zm.substr(0, 1);
 
en += '<li data-anchor="' + name + '" class="item">' + name + '</li>';
 
var len = data[i].brand.length;
 
anchorMap[name] = y;
 
y -= titleHeight + len * itemHeight;
 
}
 
en += '</ul>';
 
cities.innerHTML = lists;
 
shortcut.innerHTML = en;
 
shortcut.style.top = (cityWrapper.clientHeight - shortcut.clientHeight) / 2 + 'px';
 
 
 
scroll = new window.BScroll(cityWrapper, {
 
probeType: 3
 
});
 
scroll.scrollTo(0, 0);
 
}
 
bindEvent();
 
 
 
}
 
});
 
 
 
}
 
 
 
//bind Event
 
function bindEvent() {
 
var touch = {};
 
var firstTouch;
 
shortcut.addEventListener('touchstart', function (e) {
 
var anchor = e.target.getAttribute('data-anchor');
 
firstTouch = e.touches[0];
 
touch.y1 = firstTouch.pageY;
 
touch.anchor = anchor;
 
$("#showLetter span").html(anchor);
 
$("#showLetter").show().delay(500).hide(0);
 
scrollTo(anchor);
 
});
 
 
 
//点击一级品牌事件获取显示二级车系
 
cities.addEventListener('click', function (e) {
 
$(".conts").css("display", "block");
 
$(".car_bse").css("display", "none");
 
brand = e.target.getAttribute('data-name');
 
//8888888888888888888888888
 
$.ajax({
 
//获取地址
 
url: "",
 
//提交方式
 
type: "post",
 
async: true,
 
data: {
 
brand: brand
 
},
 
//绑定数据
 
success: function (data) {
 
var data = data.data;
 
console.log(data);
 
var str = "";
 
for (i = 0; i < data.length; i++) {
 
str += "<li class='car_series'>" + data[i].vender + "</li>";
 
//              console.log(data[i].shou_zm);
 
for (j = 0; j < data[i].car_series.length; j++) {
//                console.log(data[i].brand[j].brand);
str += '<li class="car_seriess" data-name="' + data[i].car_series[j].car_series + '" data-id="' + data[i].car_series[j].car_series + '"><span class="car_text" data-id="' + data[i].car_series[j].car_series + '" data-name="' + data[i].car_series[j].car_series + '">' + data[i].car_series[j].car_series + '</span></li>';
 
 
 
}
 
}
 
//                $(".cont_ser").append(str);
 
cont_ser.innerHTML = str;
 
}
 
});
 
 
 
//888888888888888888
 
console.log("该品牌为" + brand);
 
 
 
});
 
//点击二级菜单
 
cont_ser.addEventListener('click', function (e) {
 
//获取到当前点击的车系
 
car_service = e.target.getAttribute('data-name');
 
$(".conts").css("display", "none");
 
$(".car_bse").css("display", "block");
 
 
 
$.ajax({
 
//获取地址
 
url: "",
 
//提交方式
 
type: "post",
 
async: true,
 
data: {
 
brand: brand,
 
car_series: car_service
 
},
 
//绑定数据
 
success: function (data) {
 
var data = data.data;
 
console.log(data);
 
var str = "";
 
for (i = 0; i < data.length; i++) {
 
 
 
str += '<li class="carbse_ser" data-name="' + data[i] + '">' + data[i] + '</li>';
 
 
 
}
 
car_bse_cot.innerHTML = str;
 
 
 
}
 
});
 
 
 
});
 
car_bse_cot.addEventListener('click', function (e) {
 
carbse_ser = e.target.getAttribute('data-name');
 
 
 
var service_name = brand + car_service + carbse_ser;
 
window.location.href = "ecar.html";
 
 
 
sessionStorage.setItem("car_names", service_name);
 
//mess(brand,car_service,carbse_ser);
 
 
 
})
 
//申明一个带参函数 页面跳转传参
 
function mess(brand, car_service, carbse_ser) {
 
var car_names = brand + car_service + carbse_ser;
 
window.location.href = "e_car.html?car_names=" + encodeURI(car_names);
 
}
 
shortcut.addEventListener('touchmove', function (e) {
 
firstTouch = e.touches[0];
 
touch.y2 = firstTouch.pageY;
 
var anchorHeight = 16;
 
var delta = (touch.y2 - touch.y1) / anchorHeight | 0;
 
var anchor = shortcutList[shortcutList.indexOf(touch.anchor) + delta];
 
scrollTo(anchor);
 
e.preventDefault();
 
e.stopPropagation();
 
});
 
 
 
function scrollTo(anchor) {
 
var maxScrollY = cityWrapper.clientHeight - cityScroller.clientHeight + 100;
 
var y = Math.min(0, Math.max(maxScrollY, anchorMap[anchor]));
 
if (typeof y !== 'undefined') {
 
scroll.scrollTo(0, y);
 
}
 
}
 
}
 
</script>
 
< /body>
 
 
 
< /html>
 

